<template>
	<view class="member-level" :data-theme="themeStyle">
		<!-- <view class="level-top">
			<image :src="$util.img('/upload/uniapp/level/card-top-bg.png')"></image>
		</view> -->
		<view class="banner-container">
			<view class="memberInfo">
				<image :src="$util.img(userInfo.headimg)" v-if="userInfo.headimg" @error="headimgError"
					mode="aspectFill"></image>
				<image :src="$util.getDefaultImage().default_headimg" v-else mode="aspectFill"></image>
				<view class="member-desc">
					<view class="font-size-toolbar">{{ userInfo.nickname }}</view>
					<view class="font-size-tag expire-time">ID：{{ userInfo.member_id }}</view>
				</view>
				<!-- 积分 -->
				<view class="user-point" @click="jumpPage('/otherpages/member/point/point')">
					<view>{{userInfo.point}}</view>
					<text>我的积分</text>
				</view>
			</view>

			<view class="image-container item-center">
				<view class="slide-image">
					<image
						:src="levelInfo.store_image ? $util.img(levelInfo.store_image) : $util.img('upload/uniapp/level/card-bg.png')"
						:style="{'background-color':levelInfo.store_image ? '' : levelInfo.bg_color}"></image>
					<view class="info">
						<view class="level-detail" v-if="levelInfo.level_id == 6 ">
							{{ levelInfo.level_name }}会员
						</view>
						<view class="level-detail level-detail1" v-if="levelInfo.level_id == 5">
							{{ levelInfo.level_name }}会员
						</view>
						<view class="level-detail level-detail2" v-if="levelInfo.level_id == 2">
							{{ levelInfo.level_name }}会员
						</view>
						<view style="height: 60rpx;"></view>
						<block v-if="levelInfo.level_id == 6">
							<view class="blankcard" v-if="blankcard">
								NO.{{blankcard}}
							</view>
							<view class="font-size-tag expire-time blankcard" v-if="userInfo.level_expire_time > 0">
								有效期至：{{ $util.timeStampTurnTime(userInfo.level_expire_time, true) }}</view>
						</block>
						<block v-if="levelInfo.level_id == 5">
							<view class="blankcard1" v-if="blankcard">
								NO.{{blankcard}}
							</view>
							<view class="font-size-tag expire-time blankcard1" v-if="userInfo.level_expire_time > 0">
								有效期至：{{ $util.timeStampTurnTime(userInfo.level_expire_time, true) }}</view>
						</block>
						<block v-if="levelInfo.level_id == 2">
							<view class="blankcard2" v-if="blankcard">
								NO.{{blankcard}}
							</view>
							<view class="font-size-tag expire-time blankcard2" v-if="userInfo.level_expire_time > 0">
								有效期至：{{ $util.timeStampTurnTime(userInfo.level_expire_time, true) }}</view>
						</block>
						<view class="growth-rules font-size-tag" @click="openExplainPopup"
							v-if="levelInfo.remark != '' ">
							<text class="iconfont iconwenhao font-size-tag"></text>
						</view>
						<button type="default" class="renew-btn" v-if="levelInfo.level_id == 6"
							@click="$util.redirectTo('/otherpages/member/card_buy/card_buy')">立即续费</button>
						<button type="default" class="renew-btn renew-btn1" v-if="levelInfo.level_id == 5"
							@click="$util.redirectTo('/otherpages/member/card_buy/card_buy')">立即续费</button>
						<button type="default" class="renew-btn renew-btn2" v-if="levelInfo.level_id == 2"
							@click="$util.redirectTo('/otherpages/member/card_buy/card_buy')">立即续费</button>
					</view>
				</view>
			</view>

			<view class="card-content"
				v-if="levelInfo.is_free_shipping || levelInfo.consume_discount < 100 || levelInfo.point_feedback > 0">
				<image class="card-privilege-list" v-if="levelInfo.level_id == 6"
					src="https://wanzhi.daqinfarmer.com/public/images/baiyinquanyi.png"></image>
				<image class="card-privilege-list" v-if="levelInfo.level_id == 5"
					src="https://wanzhi.daqinfarmer.com/public/images/huangjinquanyi.png"></image>
				<image class="card-privilege-list" v-if="levelInfo.level_id == 2"
					src="https://wanzhi.daqinfarmer.com/public/images/zuanshiquanyi.png"></image>

				<!-- <view v-if="levelInfo.send_coupon != '' || levelInfo.send_point > 0 || levelInfo.send_balance > 0">
					<view class="card-content-head">
						<view class="line-box"><view class="line right"></view></view>
						<view class="card-content-title">开卡礼包</view>
						<view class="line-box"><view class="line"></view></view>
						<view class="clear"></view>
					</view>
					<view class="card-privilege-list">
						<view class="card-privilege-item" v-if="levelInfo.send_point > 0">
							<view class="card-privilege-icon">
								<text class="iconfont iconjifen3"></text>
							</view>
							<view class="card-privilege-name">积分礼包</view>
							<view class="card-privilege-text">赠送{{levelInfo.send_point}}积分</view>
						</view>
						<view class="card-privilege-item" v-if="levelInfo.send_balance > 0">
							<view class="card-privilege-icon">
								<text class="iconfont iconhongbao"></text>
							</view>
							<view class="card-privilege-name">红包礼包</view>
							<view class="card-privilege-text">赠送{{ parseFloat(levelInfo.send_balance)}}红包</view>
						</view>
						<view class="card-privilege-item" v-if="levelInfo.send_coupon != ''">
							<view class="card-privilege-icon" >
								<text class="iconfont iconyouhuiquan1"></text>
							</view>
							<view class="card-privilege-name">优惠券礼包</view>
							<view class="card-privilege-text">赠送{{levelInfo.send_coupon.split(',').length}}张优惠券</view>
						</view>
					</view>
				</view> -->
			</view>





			<!-- 所属会员优惠券 -->
			<!-- <view class="card-content1" v-if="computedCouponList.length > 0" style="padding: 20rpx;margin: 20rpx;">
				<view class="card-content-head">
					<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/101682320918.png"></image>
					<view class="card-content-title">会员专享劵</view>
					<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/431682320999.png"></image>
				</view>

				<view class="coupon-style-four">
					<view class="coupon-box" v-for="(item, index) in computedCouponList" :key="index">
						<view class="coupon-list">
							<image src="https://wanzhi.daqinfarmer.com/public/images/521682326605.png"></image>
							<view class="coupon">
								<view class="coupon-info">
									<view class="coupon-num" v-if="item.discount == '0.00'">
										<text class="font-size-tag coupon-sign">￥</text>
										<text class="coupon-size">{{ Number(item.money) }}</text>
									</view>
									<view class="coupon-num" v-else>
										<text class="coupon-size">{{ Number(item.discount) }}</text>
										<text class="font-size-tag coupon-sign">折</text>
									</view>
								</view> 
								<view class="coupon-get" @click="toGoodsList(item, index)">
									<view class="coupon-type">
										<text v-if="item.at_least > 0" class="">满{{ Number(item.at_least) }}元可用</text>
										<text v-else class="">无门槛优惠券</text>
									</view>
									<view class="btn_coupon">去使用</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> --> 
			<view class="card-content1 active_list">
				<view class="card-content-head">
					<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/101682320918.png"></image>
					<view class="card-content-title">会员活动区</view>
					<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/431682320999.png"></image>
				</view>

				<view class="flex-active" v-if="userInfo.member_level == 6">
					<image class="flex-active-bg" src="https://wanzhi.daqinfarmer.com//public/images/191682327486.png"
						mode=""></image>
					<view class="flex-active-img">
						<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1666951848')">
							<view>限时折扣</view>
							<view>立即抢购</view>
						</view>
						<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1666953967')">
							<view>拼团活动</view>
							<view>点击参与</view>
						</view>
					</view>
				</view>
				<view class="flex-active" v-else-if="userInfo.member_level == 5">
					<image class="flex-active-bg" src="https://wanzhi.daqinfarmer.com//public/images/191682327486.png"
						mode=""></image>
					<view class="flex-active-img">
						<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016273')">
							<view>限时折扣</view>
							<view>立即抢购</view>
						</view>
						<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016308')">
							<view>拼团活动</view>
							<view>点击参与</view>
						</view>
					</view>
				</view>
				<view class="flex-active" v-else-if="userInfo.member_level == 2">
					<image class="flex-active-bg" src="https://wanzhi.daqinfarmer.com//public/images/191682327486.png"
						mode=""></image>
					<view class="flex-active-img">
						<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016334')">
							<view>限时折扣</view>
							<view>立即抢购</view>
						</view>
						<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016357')">
							<view>拼团活动</view>
							<view>点击参与</view>
						</view>
					</view>
				</view>

				<view style="height: 40rpx;clear:both;"></view>
			</view>



			<view class="card-content1" v-if="goods_count > 0">
				<view class="card-content-head">
					<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/101682320918.png"></image>
					<view class="card-content-title">会员产品区</view>
					<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/431682320999.png"></image>
				</view>

				<view class="card_goods_list">
					<view class="card_goods_children" v-for="(item,i) in goodsList" :key="i" @click="toDetail(item)">
						<view class="goods_img">
							<image class="goods_img_bg"
								src="https://wanzhi.daqinfarmer.com/public/images/431682332497.png" mode=""></image>
							<image class="goods_imgs" :src="item.sku_image" alt=""></image>
							<view class="price">
								<text v-if="item.zt == 1"><text
										style="font-size: 20rpx;">￥</text>{{item.member_price*bili}}</text>
								<text v-else><text style="font-size: 20rpx;">￥</text>{{item.member_price}}</text>
								<!-- <del>￥{{item.price}}</del> -->
							</view>
						</view>
						<view class="container">
							<view class="goods_name">
								{{item.goods_name}}
							</view>

							<view class="card_goods_buy">
								<button v-if="item.stock > 0">立即购买</button>
								<button class="endbtn" v-else>已售罄</button>
							</view>
						</view>
					</view>
					<view style="height: 40rpx;clear:both;"></view>
				</view>
			</view>
		</view>
		<!-- 弹出规则 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="explainPopup" type="bottom">
				<view class="tips-layer">
					<view class="head" @click="closeExplainPopup()">
						<view class="title">会员卡说明</view>
						<text class="iconfont iconclose"></text>
					</view>
					<view class="body">
						<view class="detail margin-bottom">
							<block v-if="levelInfo.remark != ''">
								<view class="tip">会员卡说明</view>
								<view class="font-size-base">{{ levelInfo.remark }}</view>
							</block>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<nsGoodsRecommend ref="goodrecommend"></nsGoodsRecommend>
		<ns-login ref="login"></ns-login>
		<loading-cover ref="loadingCover"></loading-cover>
		<Pengpai-FadeInOut :duration="2000" :wait="1000" :top="330" :left="10" :radius="60" :loop="true" :info="item"
			v-for="(item, index) in list" :key="index"></Pengpai-FadeInOut>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
	import scroll from '@/common/js/scroll-view.js';
	import nsPayment from '@/components/payment/payment.vue';
	import diyCoupon from '@/components/diy-coupon/diy-coupon.vue';

	import PengpaiFadeInOut from '@/components/FadeInOut/FadeInOut.vue'

	export default {
		components: {
			uniPopup,
			nsPayment,
			diyCoupon,
			nsGoodsRecommend,
			PengpaiFadeInOut
		},
		mixins: [scroll, globalConfig],
		data() {
			return {
				point: 0, //积分
				isSub: false, // 是否已提交
				isIphoneX: false,
				levelId: 0,
				userInfo: {},
				levelInfo: {
					bg_color: '#333'
				},

				bili: 0,
				page: 1,
				blankcard: '',
				couponList: [],
				goodsList: [],
				totalPage: 0,
				goods_count: 0,
				goods_ids: '',

				list: [],
				//演示数据
				demo_data: [],

				baseActiveImgA: '',
				baseActiveImgB: ''
			};
		},
		computed: {
			storeToken() {
				return this.$store.state.token;
			},
			computedCouponList() {
				var list = [];
				this.couponList.filter(function(item) {
					if (item.count != item.lead_count) list.push(item);
				});
				return list;
			}
		},
		onLoad() {
			setInterval(() => {
				this.add()
			}, 3000)
			//会员卡
			this.isIphoneX = this.$util.uniappIsIPhoneX();
			this.$langConfig.refresh();
			if (uni.getStorageSync('token')) {
				this.getMemberInfo();
			} else {
				setTimeout(() => {
					this.$refs.login.open('/otherpages/member/card/card');
				});
			}
		},

		onShow() {
			this.getMemberInfo();
			this.baseActiveImgA = this.$config.baseUrl + '/upload/xszk.png';
			this.baseActiveImgB = this.$config.baseUrl + '/upload/pint.png';
			console.log(this.baseActiveImgA)
			console.log(this.baseActiveImgB)
			setTimeout(val => {
				this.page = 1
				this.goodsList = []
				this.list = []
				this.getCardlist();
				this.getGoodsList();
				this.getCanReceiveCouponQuery();
			}, 1000)
		},
		watch: {
			storeToken: function(nVal, oVal) {
				if (nVal) {
					this.getMemberInfo();
				}
			}
		},
		onReachBottom() {
			this.page++;
			if (this.page > this.totalPage) {
				return false
			} else {
				this.getGoodsList();
			}
		},
		methods: {
			jumpPage(url) {
				this.$util.redirectTo(url);
			},
			add() {
				//随机获取演示数据
				let randomItem = this.demo_data[Math.floor(Math.random() * this.demo_data.length)];
				//追加一条数据
				this.list = this.list.concat(randomItem);
			},
			redirectToLink(url) {
				this.$util.redirectTo(url);
			},
			getCardlist() {
				this.$api.sendRequest({
					url: '/api/member/cardlist',
					success: res => {
						console.log(res)
						this.demo_data = res.data.list
					},
					fail: res => {

					}
				});
			},
			getGoodsList() {
				var data = {
					page: this.page,
					page_size: 10,
					card_vip: 1,
					goods_ids: this.goods_ids
				};

				this.$api.sendRequest({
					url: '/api/goodssku/page',
					data: data,
					success: res => {
						// console.log(res)
						let rows = res.data.list
						this.goodsList = this.goodsList.concat(rows);

						console.log(this.goodsList)
						this.totalPage = res.data.page_count

						this.goods_count = res.data.count

					},
					fail: res => {

					}
				});
			},
			toDetail(e) {

				if (e.zt == 1) {
					this.$util.showToast({
						title: '该商品未参与会员折扣！'
					});
					return false
				}

				this.$util.redirectTo('/pages/goods/detail/detail', {
					sku_id: e.sku_id
				});
			},
			couponTap(item, index) {
				if (item.count == item.lead_count) {
					this.$util.showToast({
						title: '该优惠券已抢光'
					});
					return;
				}
				if (item.useState == 0) this.receiveCoupon(item, index);
				else this.toGoodsList(item);
			},
			// 领取优惠券
			receiveCoupon(item, index) {
				if (this.couponBtnSwitch) return;
				this.couponBtnSwitch = true;
				let token = uni.getStorageSync('token');
				if (token != '') {
					this.$api.sendRequest({
						url: '/coupon/api/coupon/receive',
						data: {
							coupon_type_id: item.coupon_type_id,
							level_id: this.vipId,
							get_type: 2 //获取方式:1订单2.直接领取3.活动领取
						},
						success: res => {
							var data = res.data;
							let msg = res.message;
							if (res.code == 0) {
								msg = '领取成功';
								let list = this.couponList;
								if (res.data.is_exist == 1) {
									for (let i = 0; i < list.length; i++) {
										if (list[i].coupon_type_id == item.coupon_type_id) {
											list[i].useState = 1;
										}
									}
								} else {
									for (let i = 0; i < list.length; i++) {
										if (list[i].coupon_type_id == item.coupon_type_id) {
											list[i].useState = 2;
										}
									}
								}
							}
							this.$util.showToast({
								title: msg
							});
							this.couponBtnSwitch = false;
							this.$forceUpdate();
						},
						fail: res => {
							this.couponBtnSwitch = false;
						}
					});
				} else {
					this.$refs.login.open('/pages/index/index/index');
					this.couponBtnSwitch = false;
				}
			},
			//去使用
			toGoodsList(item) {
				if (item.goods_type != 1) {
					this.$util.redirectTo('/pages/goods/list/list', {
						coupon: item.coupon_type_id
					});
				} else {
					this.$util.redirectTo('/pages/goods/list/list', {});
				}
			},
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code == 0 && res.data) {
							this.levelId = res.data.member_level;
							this.userInfo = res.data;

							let levelInfo = res.data.member_level_info;
							let charge_rule = res.data.charge_rule ? JSON.parse(res.data.charge_rule) : {};
							levelInfo.charge_rule_arr = [];
							Object.keys(charge_rule).forEach((key) => {
								levelInfo.charge_rule_arr.push({
									'key': key,
									'value': charge_rule[key]
								})
							})
							this.levelInfo = levelInfo;

							this.goods_ids = res.data.member_level_info.goods_ids
							this.send_coupon = res.data.member_level_info.send_coupon

							this.blankcard = res.blankcard

							this.bili = res.data.member_level_info.consume_discount / 100
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			headimgError() {
				this.userInfo.headimg = this.$util.getDefaultImage().default_headimg;
			},
			getCanReceiveCouponQuery() {
				var data = {
					page: 1,
					page_size: 100,
					can_receive: 1,
					send_coupon: this.send_coupon
				};

				this.$api.sendRequest({
					url: '/coupon/api/coupon/typepagelists',
					data: data,
					success: res => {
						let data = res.data;
						if (data != null) {
							this.couponList = data.list;
							this.couponList.forEach(v => {
								v.useState = 0;
							});
						}
					}
				});
			},
			/**
			 * 打开说明弹出层
			 */
			openExplainPopup() {
				this.$refs.explainPopup.open();
			},
			/**
			 * 打开说明弹出层
			 */
			closeExplainPopup() {
				this.$refs.explainPopup.close();
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			this.$util.redirectTo('/pages/member/index/index', {}, 'reLaunch');
			return true;
		}
	};
</script>

<style lang="scss">
	@import '../public/css/card.scss';

	.flex-active {
		position: relative;

		.flex-active-bg {
			width: 100%;
			height: 246rpx;
		}

		.flex-active-img {
			position: absolute;
			top: 0rpx;
			left: 6%;
			width: 90%;
			display: flex;
			justify-content: space-between;

			>view {
				width: 50%;
				text-align: center;
				margin-top: 45rpx;

				view:first-child {
					font-size: 36rpx;
					font-weight: bold;
					color: #FFE9CA;
					background: linear-gradient(0deg, #FFE9CA 0%, #FFF8EE 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				view:last-child {
					width: 127rpx;
					height: 28rpx;
					margin: 0 auto;
					margin-top: 15rpx;
					background: #FFE9CA;
					border-radius: 14rpx;
					font-size: 22rpx;
					color: #C3362D;
					text-align: center;
					line-height: 28rpx;
				}
			}

		}
	}


	.member-level .card-content {
		background-color: #FFFFFF;
	}

	.banner-container .image-container .slide-image {
		width: calc(100% - 60rpx);
		height: 330rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat
	}

	.banner-container .image-container image {
		// background-color: #E3B66B;
	}

	.banner-container .slide-image .renew-btn {
		text-align: center;
		line-height: 56rpx;
		height: 56rpx;
		border-radius: 56rpx;
		width: 160rpx;
		font-size: $font-size-tag;
		background: linear-gradient(-90deg, #6688DE, #B1C3F0);
		border-radius: 35rpx;
		color: #103186 !important; 
		position: absolute;
		right: 10rpx;
		bottom: 40rpx;
		border: none;
		z-index: 10;
	}
	.banner-container .slide-image .renew-btn1{
		background: linear-gradient(-90deg, #DEB266, #F0D9B1);
		color: #B56101 !important;
	}
	.banner-container .slide-image .renew-btn2{
		background: linear-gradient(-90deg, #DEA266, #EFE0B0);
		color: #57270F !important;
	}

	.blankcard {
		color: #406BD6 !important;
		margin-top: 20rpx; 
		font-size: 24rpx;
	}

	.blankcard1 {
		color: #D69C40 !important;
		margin-top: 20rpx;
		font-size: 24rpx;
	}

	.blankcard2 {
		color: #BCA27D !important;
		margin-top: 20rpx;
		font-size: 24rpx;
	}

	.blank_card {
		margin-top: 40rpx !important;
	}



	.card_goods_list {
		width: 95%;
		margin: 0 auto;

		.card_goods_children {
			width: 48%;
			display: inline-block;
			float: left;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 3%;

			.goods_img {
				width: 100%;
				position: relative;
				height: 250rpx;
				border-radius: 10rpx 10rpx 0 0;

				.goods_imgs {
					width: 100%;
					height: 100%;
				}

				.goods_img_bg {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0rpx;
					top: 0rpx;
				}

				.price {
					position: absolute;
					bottom: 5rpx;
					left: 0rpx;
					font-size: 30rpx;
					color: #57270F;
					font-weight: 600;
					font-style: italic;
				}
			}

			.container {
				padding-bottom: 20rpx;

				.goods_name {
					color: #333333;
					font-size: 30rpx;
					margin-top: 15rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}



				.card_goods_buy {
					text-align: center;

					.endbtn {
						background: #f2f2f2;
						color: #333333;
					}

					button {
						width: 155rpx;
						height: 44rpx;
						background: linear-gradient(-90deg, #DEA266, #EFE0B0);
						border-radius: 22rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #57270F;
						line-height: 44rpx;
						margin-left: 0rpx;
					}
				}
			}
		}

		.card_goods_children:nth-child(2n) {
			float: right;
		}
	}

	/* 样式一 */
	.coupon-all {
		width: 100%;
		flex-direction: row;
		white-space: nowrap;
		box-sizing: border-box;
		line-height: 1;
	}

	.coupon-box {
		display: inline-block;
		position: relative;
		margin-right: 22rpx;
	}

	.coupon-box:nth-child(3n) {
		margin-right: 0;
	}

	.coupon-list {
		position: relative;
	}

	.coupon-bg {
		width: 254rpx;
		height: 114rpx;
	}

	.coupon {
		width: 254rpx;
		height: 114rpx;
		border-radius: $border-radius;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 0;
		top: 0;

		.coupon-info {
			width: 38%;
			height: 100%;
			padding: 10rpx 15rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.coupon-type {
				color: #7A4023;
				font-size: $font-size-activity-tag;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
			}

			.coupon-num {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				margin-bottom: 10rpx;

				.coupon-sign {
					margin-bottom: 4rpx;
				}

				.coupon-size {
					font-size: 40rpx;
					font-weight: bold;
				}

				text {
					line-height: 1;
					color: #7A4023;
				}
			}
		}

		.coupon-get {
			width: 62%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			view {
				line-height: 1.5;
				color: #7A4023;
				font-size: $font-size-tag;
			}

			.btn_coupon {
				background: #F2DFB8;
				border-radius: 25rpx;
				margin-top: 15rpx;
				padding: 10rpx 20rpx;
			}
		}
	}

	.coupon-shu {
		width: 702rpx;
		height: 294rpx;
		margin: 0 auto;
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		flex-direction: row;
		white-space: nowrap;

		.shu-item {
			width: 202rpx;
			height: 294rpx;
			display: inline-block;
			margin-right: 24rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: 0 -48rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.item-num {
				line-height: 1;
				margin-top: 35rpx;
				width: 100%;
				text-align: center;

				.coupon-size {
					font-size: 40rpx;
				}
			}
		}

		.item-type {
			line-height: 1;
			margin-top: 22rpx;
			width: 100%;
			text-align: center;
			font-size: $font-size-goods-tag;

			.item-text {
				font-size: $font-size-goods-tag;
				color: #838383;
				width: 100%;
				text-align: center;
				line-height: 1;
				margin-top: 15rpx;
			}
		}

		.item-btn {
			width: 120rpx;
			height: 46rpx;
			line-height: 1;
			color: #fff;
			border-radius: 23rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 22rpx;
		}
	}

	// 风格四
	.coupon-style-four {
		.coupon-list {
			font-size: 0;

			>image {
				width: 315rpx;
				height: 122rpx;
			}

			.coupon {
				width: 315rpx;
				height: 122rpx;

				.coupon-info {
					padding: 0;

					.coupon-num {
						margin-top: 4rpx;
						margin-bottom: 0;
					}

					.coupon-size {
						font-size: 48rpx;
						line-height: 1;
					}

					.coupon-type {
						line-height: 1.5;
						margin-top: 16rpx;
						color: #7A4023;
					}
				}

				.coupon-get {

					view {
						font-size: 20rpx;
						line-height: 1;
					}
				}
			}
		}
	}

	.card-privilege-text {
		margin-top: 12rpx;
	}

	.zhe {
		// background: #E8BF79;
		background-image: linear-gradient(#E8BF79, #FFFFFF);
		border-radius: 50%;
		width: 62rpx;
		height: 62rpx;
		line-height: 62rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
</style>